<template>
    <div class="dispatchSet">
        <div class="header">
            <span class="header_title">调度设置</span>
            <span style="cursor: pointer;" @click="() => emit('closeWindow')">X</span>
        </div>
        <div class="info">
            <span class="info_title">{{ props.dialog_data.plateNo }}（{{ props.dialog_data.numbered }}）</span>
            调度状态：<span class="grean_font">{{ props.dialog_data.dispatchState }}</span>
            车辆状态：<span class="grean_font">{{ props.dialog_data.online === 0 ? '在线' : '离线' }}</span>
            运营状态：<span class="grean_font">{{ props.dialog_data.operationalStatus === 0 ? '营运' : '非营运' }}</span>
        </div>
        <div class="conetnt">
            <span style="color: red;">*</span><span> 改变后调度状态：</span>
            <el-checkbox-group v-model="checkValue">
                <el-checkbox v-for="item in checkItemList " :key="item.label" :label="item.label"
                    :value="item.value"></el-checkbox>
            </el-checkbox-group>
        </div>
        <div class="btn" style="text-align: center;">
            <el-button type="primary" style="width: 100px;">保存</el-button>
        </div>
    </div>
</template>

<script setup >
const emit = defineEmits(['closeWindow'])
const props = defineProps({
    dialog_data: Object
})

console.log('这个是带过来的值', props.dialog_data);

const checkValue = ref()
const checkItemList = ref([
    { label: '运营', value: '0' },
    { label: '保养', value: '1' },
    { label: '加油汽', value: '2' },
    { label: '维修', value: '3' },
    { label: '包车', value: '4' },
    { label: '故障', value: '5' },
    { label: '事故', value: '6' },
    { label: '其他', value: '7' },
])


</script>

<style scoped lang="scss">
@import '@/assets//styles/mixin';

.dispatchSet {
    .header {
        @include centerWithBorder;

        .header_title {
            font-size: 20px;
        }
    }

    .info {
        margin: 20px 0;

        .info_title {
            font-size: 18px;
            margin-right: 30px;
        }

        .grean_font {
            color: rgb(0, 255, 0);
            margin-right: 40px;
        }
    }

    .conetnt {
        margin: 20px 0 40px;
        display: flex;
        align-items: center;

        :deep .el-checkbox__label {
            color: #9BAFD6;
        }
    }
}
</style>